<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../../public/css/sn/brochure.css">
  <link rel="stylesheet" href="../../public/css/sn/head.css">
</head>

<body>


  <div class="boil">
    <!-- 顶部导航 -->
    <div class="top-nav">
      <div class="clearfix">
        <div class="conn">
          <!-- logo -->
          <a href="" class="logo">
            <img src="../../public/img/fll/logo.svg" alt="">
          </a>
          <!-- 导航列表 -->
          <div class="main-nav">
            <ul class="nav-list">
              <li>
                <ul class="need">
                  <li><a href="">首页</a></li>
                  <li><a href="">沸点</a></li>
                  <li><a href="">话题</a></li>
                  <li><a href="">小册</a></li>
                  <li><a href="">活动</a></li>
                  <li><a href="">有奖征文🎁</a></li>
                </ul>
              </li>
              <li class="search-inp">
                <form action="" class="search-form">
                  <input type="search" placeholder="搜索更新啦">
                  <img src="../../public/img/fll/search.svg" alt="" class="search-icon">
                </form>
                
              </li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
        </div>
      </div>
    </div>










  <!-- 整个轮播图区域的大盒子 -->
  <div class="tabs">

    <!-- 1.tab切换导航部分 -->
    <div class="navtab">
      <div class="common clearfix">
        <ul>
          <li><a href="javascript:;" cont="all" class="active">全部</a></li>
          <li><a href="javascript:;" cont="qian">前端</a></li>
          <li><a href="javascript:;" cont="hou">后端</a></li>
          <li><a href="javascript:;" cont="yi">移动开发</a></li>
          <li><a href="javascript:;" cont="qu">区块链</a></li>
          <li><a href="javascript:;" cont="tong">通用</a></li>
        </ul>
      </div>
    </div>

    <!-- 2.tab 内容部分 -->
    <div class="content">
      <div class="common">
        <!-- 全部 -->
        <div id="all" class="section" style="display:block">

          <!-- '全部'页面的 盒子 -->

          <!-- 1------- -->
          <div class="box_s box_first clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/book-1.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">如何使用掘金社区</span>
              <!-- 描述 -->
              <div class="inner-r-desc">掘金社区的各个功能的官方指南，帮助你玩转掘金，成为一名优秀的开发者</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>掘金站长</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">免费</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">十七小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长28分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4568人已购买</span>
                </div>

              </div>



            </div>


          </div>



          <!-- 2----- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/book-fen.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">WebGL 入门与实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">介绍 WebGL 与 CSS 3D 开发的点点滴滴，详细阐述 3D 数学库的实现原理与使用</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/wang.jpg" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">王明仁
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>某大型互联网公司前端工程师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥39.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">33小节 · </span>
                  <!-- 阅读时长 -->
                  <!-- <span class="time-long">阅读时长28分 · </span> -->
                  <!-- 购买人数 -->
                  <span class="people-num">1539人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 3---------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/mysqlyunxing.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">MySQL 是怎样运行的：从根儿上理解 MySQL</span>
              <!-- 描述 -->
              <div class="inner-r-desc">授人以鱼不如授人以渔，从根儿上理解 MySQL，让 MySQL 不再是一个黑盒。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">关瑞
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>公众号「我们都是小蛤蟆」作者</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">27小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长762分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">7753人已购买</span>
                </div>

              </div>



            </div>


          </div>


          <!-- 4----- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/qianduanmianshi.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">前端面试之道</span>
              <!-- 描述 -->
              <div class="inner-r-desc">助你建立起完整的前端知识架构体系，探究知识的原理，深入了解大厂常考知识点</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">迪斯科
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>GitHub 15K Star 项目作者</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥49.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">36小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长265分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">7565人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 5---------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-pub.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Kubernetes 从上手到实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">从上手实践到原理剖析，带你掌握 Kubernetes 必备技能。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">小灵魂
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>网易有道资深运维开发，骨灰级 Linux 程序员</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">免费</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">24小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长322分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1361人已购买</span>
                </div>

              </div>



            </div>


          </div>



          <!-- 6------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/vue.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Vue.js 组件精讲</span>
              <!-- 描述 -->
              <div class="inner-r-desc">iView 作者 3 年的 Vue.js 组件开源积累，Vue.js 组件知识深入剖析</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>TalkingData 前端架构师，iView 作者</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">20小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长224分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">3444人已购买</span>
                </div>

              </div>



            </div>


          </div>



          <!-- 7----- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-react.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">React 实战：设计模式和最佳实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">深入了解 React 应用中的设计模式，总结业界验证的最佳实践，更进一步，了解React 未来新功能 Suspense 和 Hooks。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>Hulu 架构师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">21小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长153分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1857人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 8---------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-vuejingjiang.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Vue 项目构建与开发入门</span>
              <!-- 描述 -->
              <div class="inner-r-desc">从构建到开发，帮助 Vue 开发者提升项目构建与开发能力，基于 Vue CLI 3</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>高级前端工程师，掘金专栏作者，专注 Vue.js 开发</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">17小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长145分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">3398人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 9----- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-qianduan.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">前端性能优化原理与实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">毫秒必争！深入理解前端性能原理，将晦涩的知识转化为可爱的生产力，建立你自己的优化技能索引目录</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>阿里巴巴集团前端工程师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">15小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长130分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">5810人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 10---------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-redis.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Redis 深度历险：核心原理与应用实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">大型互联网企业 Redis 实践总结，结合实际问题深入讲解 Redis 内部机制</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>掌阅服务端技术专家，互联网分布式高并发技术十年老兵</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">45小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长321分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">19435人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 11 ----------->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-chengxuyan.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">程序员职业小白书 —— 如何规划和经营你的职业</span>
              <!-- 描述 -->
              <div class="inner-r-desc">程序员职业小白书 —— 如何规划和经营你的职业</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>方糖气球博主，曾创业帮上千名程序员找到知名公司工作</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">14小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长83分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1698人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 12 ------------->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-shuzihuo.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">数字货币与区块链原理</span>
              <!-- 描述 -->
              <div class="inner-r-desc">帮助你了解掘金小册产品各项功能，学习如何选题、写作、发布和上线售卖</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">廖雪峰
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>软件架构师，精通数字货币和区块链</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">8小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长19分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">5616人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 13---------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-xiangyingshi.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">响应式编程 —— RxJava 高阶指南</span>
              <!-- 描述 -->
              <div class="inner-r-desc">研究响应式编程，探讨 ReactiveX 的底层概念和 RxJava 的高阶问题</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">查尔德
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>糗事百科 Android工程师，喜欢研究问题</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">45小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长321分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">19435人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 14 ----------->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-canvas.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">如何使用 Canvas 制作出炫酷的网页背景特效</span>
              <!-- 描述 -->
              <div class="inner-r-desc">从零开始学习 Canvas 相关知识，分析其特效，最终制作出炫酷的网页背景</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">小小倩
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>方糖气球博主，曾创业帮上千名程序员找到知名公司工作</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">14小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长83分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1698人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 15 ------------->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-npmscript.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">用 npm script 打造超溜的前端工作流</span>
              <!-- 描述 -->
              <div class="inner-r-desc">抛弃笨重的构建工具，拥抱轻巧而不失强大的 npm
                script，随小册赠送视频版教程。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">王金君
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>掘金创始人</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥0.01</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">8小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长19分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">5616人已购买</span>
                </div>

              </div>



            </div>


          </div>



          <!-- 8----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-2狮子.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">Taro 多端开发实现原理与项目实战</span>
              <!-- 描述 -->
              <div class="inner-r-desc">剖析 Taro 多端开发框架的实现原理，并通过电商核心的项目实战，帮助开发者快速上手多端项目。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>凹凸实验室</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">27小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长205分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">3188人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 9----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-3.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">前端性能优化原理与实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">毫秒必争！深入理解前端性能原理，将晦涩的知识转化为可爱的生产力，建立你自己的优化技能索引目录</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>阿里巴巴集团前端工程师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">15小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长130分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">5818人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 10----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-4.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">微信小游戏开发入门：从 0 到 1 实现井字棋游戏</span>
              <!-- 描述 -->
              <div class="inner-r-desc">构建自己的第一个微信小游戏，让你的社交和游戏创意变为现实</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>凹凸曼</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">13小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长143分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">2665人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 11----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-5-hpi.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">基于 hapi 的 Node.js 小程序后端开发实践指南</span>
              <!-- 描述 -->
              <div class="inner-r-desc">基于 Node.js 搭建敏捷高效的 RESTful 接口服务，走上小程序开发的全栈之路</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>前网易高级开发工程师，Adobe 中国认证讲师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">17小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长138分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">2463人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 12----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-6.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">微信小程序开发入门：从 0 到 1 实现天气小程序</span>
              <!-- 描述 -->
              <div class="inner-r-desc">从基础到实战，从开发环境搭建到开发、调试、上线，打通小程序开发全流程</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>资深 Web 前端工程师，十年互联网老司机</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">13小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长165分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4302人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 13----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-7 react.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">React 组合式开发实践：打造企业管理系统五大核心模块</span>
              <!-- 描述 -->
              <div class="inner-r-desc">基于 React 的企业管理系统开发经验，带你学习如何抽象复杂业务逻辑，帮助团队实现效能提升</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>阿里巴巴集团前端工程师，知乎 pure render 专栏核心作者</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">11小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长101分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">3390人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 14----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/blue-jing.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">区块链开发入门：从 0 到 1 构建基于以太坊智能合约的 ICO DApp</span>
              <!-- 描述 -->
              <div class="inner-r-desc">写给前端开发者的第一本区块链开发入门指南，通过 DApp 开发实战（基于以太坊创始人 V 神的 DAICO 设计思想），深入掌握区块链及以太坊技术</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>ArcBlock 资深前端工程师，专注区块链端应用开发</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥69</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">32小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长240分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1355人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 15----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-8javas.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">基于 JavaScript 开发灵活的数据应用</span>
              <!-- 描述 -->
              <div class="inner-r-desc">使用 JavaScript、ECharts、Vue.js 等开发工具，完成各种数据结构的处理、转换、动态过滤以及数据可视化的开发。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>七牛云高级研发工程师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">21小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长273分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1233人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 16----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-9-web.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">Web 前端面试指南与高频考题解析</span>
              <!-- 描述 -->
              <div class="inner-r-desc">找工作面试是门技术活，掌握一定技巧可以让你事半功倍</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>百度 Web 前端工程师，资深面试官</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">12小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长114分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4241人已购买</span>
                </div>
              </div>
            </div>
          </div>







          <!-- 17----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-dachang.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">大厂 H5 开发实战手册</span>
              <!-- 描述 -->
              <div class="inner-r-desc">京东、腾讯等大厂 H5 开发或 UI 开发工程师的真实实战技巧</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>凹凸曼</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">11小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长111分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">3099人已购买</span>
                </div>
              </div>
            </div>
          </div>









          <!-- 18----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-webpack.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">使用 webpack 定制前端开发环境</span>
              <!-- 描述 -->
              <div class="inner-r-desc">基于 4.x 版本，从细节和深度上弄懂 webpack，随心所欲定制前端开发环境</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>前支付宝前端开发，现唯品会高级开发</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">16小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长124分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4401人已购买</span>
                </div>
              </div>
            </div>
          </div>








          <!-- 19----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-vuejingjiang.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">剖析 Vue.js 内部运行机制</span>
              <!-- 描述 -->
              <div class="inner-r-desc">把原理抽象为小 Demo，以一种对新手友好的方式带领读者漫游 Vue.js 的世界</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>BAT 高级前端工程师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">9小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长81分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">7079人已购买</span>
                </div>
              </div>
            </div>
          </div>







          <!-- 20----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-git.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Git 原理详解及实用指南</span>
              <!-- 描述 -->
              <div class="inner-r-desc">让你不仅用上、更用明白的 Git 实用指南</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>hencoder.com 给高级 Android 工程师的进阶手册</span>

                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">22小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长82分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">5005人已购买</span>
                </div>

              </div>



            </div>
          </div>








          <!-- 21----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-npmscript.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">用 npm script 打造超溜的前端工作流</span>
              <!-- 描述 -->
              <div class="inner-r-desc">抛弃笨重的构建工具，拥抱轻巧而不失强大的 npm script，随小册赠送视频版教程。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>前端周刊主笔，前端老司机，爱折腾爱分享</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">15小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长83分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1998人已购买</span>
                </div>
              </div>
            </div>
          </div>





          <!-- 22----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/book-1.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">如何使用 Canvas 制作出炫酷的网页背景特效</span>
              <!-- 描述 -->
              <div class="inner-r-desc">从零开始学习 Canvas 相关知识，分析其特效，最终制作出炫酷的网页背景</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>饿了么 RMB FE</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">9小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长71分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">2590人已购买</span>
                </div>
              </div>
            </div>
          </div>



          <!-- 16------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/11.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Android 进阶：基于 Kotlin 的 Android App 开发实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">快速上手 Kotlin 独有新特性，整合 Android 常用框架及 MVVM 思想进行 App 开发</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">沈哲
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>快速上手Kotlin独有新特性的创始人</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">33小节 · </span>
                  <!-- 阅读时长 -->
                  <!-- <span class="time-long">阅读时长19分 · </span> -->
                  <!-- 购买人数 -->
                  <span class="people-num">486人已购买</span>
                </div>

              </div>



            </div>


          </div>
          <!-- 17--------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-tongyong2.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Web 前端面试指南与高频考题解析</span>
              <!-- 描述 -->
              <div class="inner-r-desc">找工作面试是门技术活，掌握一定技巧可以让你事半功倍</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>百度 Web 前端工程师，资深面试官</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">12小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长114分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4241人已购买</span>
                </div>

              </div>

            </div>

          </div>


          <!-- over -->

        </div>



        <!-- 前端 -->
        <div id="qian" class="section">

          <!-- 2----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/book-fen.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">WebGL 入门与实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">介绍 WebGL 与 CSS 3D 开发的点点滴滴，详细阐述</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>某大型互联网公司前端工程师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥39.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">33小节 · </span>
                  <!-- 阅读时长 -->
                  <!-- <span class="time-long">阅读时长83分30秒 · </span> -->
                  <!-- 购买人数 -->
                  <span class="people-num">1541人已购买</span>
                </div>
              </div>
            </div>
          </div>



          <!-- 3----------- -->
          <div class="box_s  clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-0.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">基于 ThreeJS 框架的魔方微信小游戏实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">从 0 到 1，一步步带你基于 ThreeJS 实现一个炫酷</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>腾讯 ISUX UI工程师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">10小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长160分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">598人已购买</span>
                </div>
              </div>
            </div>
          </div>




          <!-- 4----------- -->
          <div class="box_s  clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/qianduanmianshi.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">前端面试之道</span>
              <!-- 描述 -->
              <div class="inner-r-desc">助你建立起完整的前端知识架构体系，探究知识的原理，</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>宋小菜高级开发，GitHub 15K Star 项目作者，公众号前端真好玩主笔</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥49.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">36小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长265分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">7572人已购买</span>
                </div>
              </div>
            </div>
          </div>







          <!-- 6----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-react.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">React 实战：设计模式和最佳实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">深入了解 React 应用中的设计模式，总结业界验证的最佳实践，更进一步，了解React 未来新功能 Suspense 和 Hooks。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>Hulu 架构师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">21小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长153分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1861人已购买</span>
                </div>
              </div>
            </div>
          </div>







          <!-- 7----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-1.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">Vue 项目构建与开发入门</span>
              <!-- 描述 -->
              <div class="inner-r-desc">从构建到开发，帮助 Vue 开发者提升项目构建与开发能力，基于 Vue CLI 3</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>高级前端工程师，掘金专栏作者，专注 Vue.js 开发</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">17小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长145分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">3403人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 8----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-2狮子.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">Taro 多端开发实现原理与项目实战</span>
              <!-- 描述 -->
              <div class="inner-r-desc">剖析 Taro 多端开发框架的实现原理，并通过电商核心的项目实战，帮助开发者快速上手多端项目。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>凹凸实验室</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">27小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长205分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">3188人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 9----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-3.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">前端性能优化原理与实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">毫秒必争！深入理解前端性能原理，将晦涩的知识转化为可爱的生产力，建立你自己的优化技能索引目录</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>阿里巴巴集团前端工程师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">15小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长130分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">5818人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 10----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-4.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">微信小游戏开发入门：从 0 到 1 实现井字棋游戏</span>
              <!-- 描述 -->
              <div class="inner-r-desc">构建自己的第一个微信小游戏，让你的社交和游戏创意变为现实</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>凹凸曼</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">13小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长143分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">2665人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 11----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-5-hpi.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">基于 hapi 的 Node.js 小程序后端开发实践指南</span>
              <!-- 描述 -->
              <div class="inner-r-desc">基于 Node.js 搭建敏捷高效的 RESTful 接口服务，走上小程序开发的全栈之路</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>前网易高级开发工程师，Adobe 中国认证讲师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">17小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长138分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">2463人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 12----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-6.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">微信小程序开发入门：从 0 到 1 实现天气小程序</span>
              <!-- 描述 -->
              <div class="inner-r-desc">从基础到实战，从开发环境搭建到开发、调试、上线，打通小程序开发全流程</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>资深 Web 前端工程师，十年互联网老司机</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">13小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长165分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4302人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 13----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-7 react.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">React 组合式开发实践：打造企业管理系统五大核心模块</span>
              <!-- 描述 -->
              <div class="inner-r-desc">基于 React 的企业管理系统开发经验，带你学习如何抽象复杂业务逻辑，帮助团队实现效能提升</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>阿里巴巴集团前端工程师，知乎 pure render 专栏核心作者</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">11小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长101分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">3390人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 14----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/blue-jing.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">区块链开发入门：从 0 到 1 构建基于以太坊智能合约的 ICO DApp</span>
              <!-- 描述 -->
              <div class="inner-r-desc">写给前端开发者的第一本区块链开发入门指南，通过 DApp 开发实战（基于以太坊创始人 V 神的 DAICO 设计思想），深入掌握区块链及以太坊技术</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>ArcBlock 资深前端工程师，专注区块链端应用开发</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥69</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">32小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长240分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1355人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 15----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-8javas.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">基于 JavaScript 开发灵活的数据应用</span>
              <!-- 描述 -->
              <div class="inner-r-desc">使用 JavaScript、ECharts、Vue.js 等开发工具，完成各种数据结构的处理、转换、动态过滤以及数据可视化的开发。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>七牛云高级研发工程师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">21小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长273分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1233人已购买</span>
                </div>
              </div>
            </div>
          </div>






          <!-- 16----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-9-web.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">Web 前端面试指南与高频考题解析</span>
              <!-- 描述 -->
              <div class="inner-r-desc">找工作面试是门技术活，掌握一定技巧可以让你事半功倍</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>百度 Web 前端工程师，资深面试官</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">12小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长114分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4241人已购买</span>
                </div>
              </div>
            </div>
          </div>







          <!-- 17----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-dachang.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">大厂 H5 开发实战手册</span>
              <!-- 描述 -->
              <div class="inner-r-desc">京东、腾讯等大厂 H5 开发或 UI 开发工程师的真实实战技巧</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>凹凸曼</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">11小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长111分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">3099人已购买</span>
                </div>
              </div>
            </div>
          </div>









          <!-- 18----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/a-webpack.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">使用 webpack 定制前端开发环境</span>
              <!-- 描述 -->
              <div class="inner-r-desc">基于 4.x 版本，从细节和深度上弄懂 webpack，随心所欲定制前端开发环境</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>前支付宝前端开发，现唯品会高级开发</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">16小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长124分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4401人已购买</span>
                </div>
              </div>
            </div>
          </div>








          <!-- 19----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-vuejingjiang.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">剖析 Vue.js 内部运行机制</span>
              <!-- 描述 -->
              <div class="inner-r-desc">把原理抽象为小 Demo，以一种对新手友好的方式带领读者漫游 Vue.js 的世界</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>BAT 高级前端工程师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">9小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长81分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">7079人已购买</span>
                </div>
              </div>
            </div>
          </div>







          <!-- 20----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-git.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Git 原理详解及实用指南</span>
              <!-- 描述 -->
              <div class="inner-r-desc">让你不仅用上、更用明白的 Git 实用指南</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>hencoder.com 给高级 Android 工程师的进阶手册</span>

                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">22小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长82分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">5005人已购买</span>
                </div>

              </div>



            </div>
          </div>








          <!-- 21----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-npmscript.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">用 npm script 打造超溜的前端工作流</span>
              <!-- 描述 -->
              <div class="inner-r-desc">抛弃笨重的构建工具，拥抱轻巧而不失强大的 npm script，随小册赠送视频版教程。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>前端周刊主笔，前端老司机，爱折腾爱分享</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">15小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长83分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1998人已购买</span>
                </div>
              </div>
            </div>
          </div>





          <!-- 22----------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/book-1.png" alt=""></a>
            </div>
            <div class="inner-right">
              <span class="how">如何使用 Canvas 制作出炫酷的网页背景特效</span>
              <!-- 描述 -->
              <div class="inner-r-desc">从零开始学习 Canvas 相关知识，分析其特效，最终制作出炫酷的网页背景</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">
                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>
                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>
                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>饿了么 RMB FE</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">9小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长71分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">2590人已购买</span>
                </div>
              </div>
            </div>
          </div>



          <!-- over -->
        </div>







        <!-- 后端 -->
        <div id="hou" class="section">
          <!-- 后端的盒子 -->
          <!-- 1------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/mysqlyunxing.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">MySQL 是怎样运行的：从根儿上理解 MySQL</span>
              <!-- 描述 -->
              <div class="inner-r-desc">授人以鱼不如授人以渔，从根儿上理解 MySQL，让 MySQL 不再是一个黑盒。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">关瑞
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>公众号「我们都是小蛤蟆」作者</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">27小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长762分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">7753人已购买</span>
                </div>

              </div>



            </div>


          </div>


          <!-- 2----- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-pub.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Kubernetes 从上手到实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">从上手实践到原理剖析，带你掌握 Kubernetes 必备技能。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">Tao
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>网易有道资深运维开发，骨灰级 Linux 程序员，PyCon China 和 GITC 讲师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">24小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长137分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4568人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 3---------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-pyt.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Python 实战：用 Scrapyd 打造个人化的爬虫部署管理控制台</span>
              <!-- 描述 -->
              <div class="inner-r-desc">拒绝裸奔，为你的 Scrapyd 增添权限验证、自定义 API、开发数据统计和美化界面的功能，带你逐步实现「唯你可用」的爬虫部署管理控制台。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">爬虫
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>资深爬虫工程师</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">22小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长183分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">753人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 4 ----------->
          <div class="box_s  clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-chengxuyan.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">程序员职业小白书 —— 如何规划和经营你的职业</span>
              <!-- 描述 -->
              <div class="inner-r-desc">程序员职业小白书 —— 如何规划和经营你的职业</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>方糖气球博主，曾创业帮上千名程序员找到知名公司工作</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">14小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长83分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1698人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 5---------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-go.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">基于 Go 语言构建企业级的 RESTful API 服务</span>
              <!-- 描述 -->
              <div class="inner-r-desc">Go 服务器开发大型实战，带你一步步构建 API 开发中的各个功能点，最终完成一个企业级的 API 服务器</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">老钱
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>掌阅服务端技术专家，互联网分布式高并发十年老兵</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">免费</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">24小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长322分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1361人已购买</span>
                </div>

              </div>



            </div>


          </div>



          <!-- 6------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-vuejingjiang.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Vue.js 组件精讲</span>
              <!-- 描述 -->
              <div class="inner-r-desc">iView 作者 3 年的 Vue.js 组件开源积累，Vue.js 组件知识深入剖析</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>TalkingData 前端架构师，iView 作者</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">20小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长224分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">3444人已购买</span>
                </div>

              </div>



            </div>


          </div>


          <!-- 7---------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-pub.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Kubernetes 从上手到实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">从上手实践到原理剖析，带你掌握 Kubernetes 必备技能。</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">hanjkd
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>网易有道资深运维开发，骨灰级 Linux 程序员</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">免费</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">24小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长322分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1361人已购买</span>
                </div>

              </div>



            </div>


          </div>



          <!-- over -->
        </div>








        <!-- 移动 -->
        <div id="yi" class="section">
          <!-- 移 动开发的盒子 -->
          <!-- 1------- -->
          <div class="box_s box_first clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/11.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Android 进阶：基于 Kotlin 的 Android App 开发实践</span>
              <!-- 描述 -->
              <div class="inner-r-desc">快速上手 Kotlin 独有新特性，整合 Android 常用框架及 MVVM 思想进行 App 开发</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">沈哲
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>快速上手Kotlin独有新特性的创始人</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥19.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">33小节 · </span>
                  <!-- 阅读时长 -->
                  <!-- <span class="time-long">阅读时长19分 · </span> -->
                  <!-- 购买人数 -->
                  <span class="people-num">486人已购买</span>
                </div>

              </div>



            </div>


          </div>
          <!-- 2----- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/look-book.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Swift 数字详解</span>
              <!-- 描述 -->
              <div class="inner-r-desc">从理论到应用，全面介绍 Swift 4 中面向协议的数字系统</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">飞行
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>Mattt，AFNetworking 和 Alamofire 作者，苹果前技术作家</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">免费</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">十七小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长137分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4568人已购买</span>
                </div>

              </div>



            </div>


          </div>
          <!-- 3---------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/b-twopig.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">使用 Swift Codable 进行高效的数据编解码</span>
              <!-- 描述 -->
              <div class="inner-r-desc">使用 Swift 4 新特性 Codable，用更少的代码，更快地实现数据编解码</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">plane
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>Mattt，AFNetworking 和 Alamofire 作者，苹果前技术作家</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">免费</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">十七小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长28分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4568人已购买</span>
                </div>

              </div>



            </div>


          </div>
          <!-- 4----- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/book-woniu" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Git 原理详解及实用指南</span>
              <!-- 描述 -->
              <div class="inner-r-desc">让你不仅用上、更用明白的 Git 实用指南</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>hencoder.com 给高级 Android 工程师的进阶手册</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">22小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长82分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">5005人已购买</span>
                </div>

              </div>



            </div>


          </div>
          <!-- 5---------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/b-whitebear" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">响应式编程 —— RxJava 高阶指南</span>
              <!-- 描述 -->
              <div class="inner-r-desc">研究响应式编程，探讨 ReactiveX 的底层概念和 RxJava 的高阶问题</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">拉丁吴
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>糗事百科 Android工程师，喜欢研究问题</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥9.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">10小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长83分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">72人已购买</span>
                </div>

              </div>



            </div>


          </div>


          <!-- over -->
        </div>










        <!-- 区块链 -->
        <div id="qu" class="section">
          <!-- 区块链的盒子 -->
          <!-- 1---------- -->
          <div class="box_s box_first clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-shuzihuo.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">数字货币与区块链原理</span>
              <!-- 描述 -->
              <div class="inner-r-desc">帮助你了解掘金小册产品各项功能，学习如何选题、写作、发布和上线售卖</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">廖雪峰
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>软件架构师，精通数字货币和区块链</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">8小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长19分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">5616人已购买</span>
                </div>

              </div>



            </div>


          </div>
          <!-- 2----- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/book-woniu" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Git 原理详解及实用指南</span>
              <!-- 描述 -->
              <div class="inner-r-desc">让你不仅用上、更用明白的 Git 实用指南</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">抛物线
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>hencoder.com 给高级 Android 工程师的进阶手册</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">十七小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长28分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4568人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- 3------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/lanjing.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">区块链开发入门：从 0 到 1 构建基于以太坊智能合约的 ICO DApp</span>
              <!-- 描述 -->
              <div class="inner-r-desc">写给前端开发者的第一本区块链开发入门指南</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">陆复
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>ArcBlock 资深前端工程师，专注区块链端应用开发</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥69.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">32小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长240分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1355人已购买</span>
                </div>

              </div>



            </div>


          </div>
          <!-- over -->
        </div>






        <!-- 通用 -->
        <div id="tong" class="section">
          <!-- 通用的盒子 -->
          <!-- 1------- -->
          <div class="box_s box_first clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/book-1.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">如何使用掘金社区</span>
              <!-- 描述 -->
              <div class="inner-r-desc">掘金社区的各个功能的官方指南，帮助你玩转掘金，成为一名优秀的开发者</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>掘金站长</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">免费</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">十七小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长28分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4568人已购买</span>
                </div>

              </div>



            </div>


          </div>
          <!-- 2----- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-tongyong2.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Web 前端面试指南与高频考题解析</span>
              <!-- 描述 -->
              <div class="inner-r-desc">找工作面试是门技术活，掌握一定技巧可以让你事半功倍</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>百度 Web 前端工程师，资深面试官</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">12小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长114分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">4241人已购买</span>
                </div>

              </div>



            </div>


          </div>
          <!-- 3---------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/book-woniu" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">Git 原理详解及实用指南</span>
              <!-- 描述 -->
              <div class="inner-r-desc">让你不仅用上、更用明白的 Git 实用指南</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>hencoder.com 给高级 Android 工程师的进阶手册</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">22小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长82分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">5005人已购买</span>
                </div>

              </div>



            </div>


          </div>
          <!-- 4----- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-ruhexie.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">如何写一本掘金小册</span>
              <!-- 描述 -->
              <div class="inner-r-desc">帮助你了解掘金小册产品各项功能，学习如何选题、写作、发布和上线售卖</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>掘金创始人</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥0.01</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">8小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长19分 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">5618人已购买</span>
                </div>

              </div>



            </div>


          </div>
          <!-- 5---------- -->
          <div class="box_s clearfix">
            <div class="inner-left">
              <a href=""><img src="../../public/img/sn/cc-chengxuyan.png" alt=""></a>
            </div>

            <div class="inner-right">
              <span class="how">程序员职业小白书 —— 如何规划和经营你的职业</span>
              <!-- 描述 -->
              <div class="inner-r-desc">职业上的错误是不能回滚的，将陪伴你一生，帮助每一位程序员规划自己的职业生涯</div>
              <!-- 作者 -->
              <div class="inner-r-author clearfix">
                <!-- 头像名字和等级的div -->
                <div class="self-left clearfix">

                  <!-- 头像 -->
                  <a class="touxiang">
                    <img src="../../public/img/sn/head1.png" alt="">
                  </a>

                  <!-- 名字 -->
                  <a href="" class="name">阴明
                    <img src="../../public/img/sn/lv3.svg" alt="">
                  </a>

                </div>
                <!-- 掘金站长 -->
                <div class="selfintro">
                  <span>方糖气球博主，曾创业帮上千名程序员找到知名公司工作</span>
                </div>
              </div>
              <!-- 其他 -->
              <div class="inner-r-other clearfix">
                <div class="price">￥29.9</div>
                <div>
                  <!-- 十七节 -->
                  <span class="page-message">14小节 · </span>
                  <!-- 阅读时长 -->
                  <span class="time-long">阅读时长83分30秒 · </span>
                  <!-- 购买人数 -->
                  <span class="people-num">1698人已购买</span>
                </div>

              </div>



            </div>


          </div>

          <!-- over -->
        </div>


      </div>




    </div>

  </div>







  <!-- 右侧固定 -->
  <div class="brochure">
    <!-- 上部分 -->
    <div class="part-top">
      <!-- 上部分的上部分 -->
      <div class="brochure-top">
        <!-- what is juejin brochure? -->
        <div class="whatis">
          <div>掘金小册是什么？</div>
          <div>一个小篇幅、高浓度、成体系、有收益的技术学习平台</div>
        </div>
      </div>
      <!-- 上部分的中间部分 -->
      <div class="brochure-middle">
        <div>关注公众号 领取优惠码</div>
        <div tp><img class="erweima" src="../../public/img/sn/right-fix.png" alt=""></div>
      </div>
    </div>

    <!-- 中间部分 -->
    <div class="part-mi">
      <!-- 成为作者 -->
      <a href="" class="beauthor">
        <i>
          <img src="../../public/img/sn/beauthor.png" alt="">
        </i>
        <p>成为作者</p>
      </a>
      <!-- 建议反馈 -->
      <a href="" class="suggest">
        <i>
          <img src="../../public/img/sn/suggest.png" alt="">
        </i>
        <p>建议反馈</p>
      </a>
    </div>





    <!-- 下部分 -->
    <div class="brochure-bottom clearfix">
      <div class="left-pic">
        <img src="../../public/img/sn/45yuan.svg" alt="">
      </div>
      <div class="right-des">
        <div class="title-four">送你45元买小册</div>
        <div class="buy">立即领取</div>
      </div>
    </div>
  </div>


  <!-- 底部 -->
  <div class="footer">
    <div class="common">
      <span>©2019 掘金</span>
      <span>|</span>
      <a href=""> 津ICP备15003202号-2</a>
      <span>|</span>
      <a href=""> 京公网安备11010802026719号</a>
    </div>
  </div>



  <script src="../../public/js/sn/brochure.js"></script>
</body>

</html>